<!DOCTYPE html>
<html lang="en">

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta charset="UTF-8">
		<title>优购优品网</title>
		<link rel="stylesheet" type="text/css" href="../css/vant.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/local.css" />
		<script type="text/javascript" src="../script/jquery.js"></script>
		<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
		<script type="text/javascript" src="../script/vue.min.js"></script>
		<script src="../script/vant.min.js"></script>
		<script type="text/javascript" src="../script/fastclick.js"></script>
		<script type="text/javascript" src="../script/base.js"></script>
		<style>
			
			.van-nav-bar {
				background-color: #51d0d0 !important;
				height: initial !important;
			}
			
			.van-nav-bar .van-icon {
				color: #fff !important;
			}
			
			.van-nav-bar__title {
				color: #fff !important;
			}
			
			.pd {
				padding: 10px;
				height: calc(100% - 44px);
				overflow-y: auto;
			}

			.pd>div {
				background: #fff;
				overflow: hidden;
				border-radius: 6px;

			}

			.ov {
				overflow: hidden;
				position: relative;
			}

			.checkbox {
				float: left;
				width: 40px;
				height: 90px;
				text-align: center;
				line-height: 90px;
				position: relative;
			}

			.van-checkbox {
				display: inline-block;
			}

			.p {
				float: left;
				width: calc(100% - 40px);
				padding: 5px;
			}

			.row {
				position: relative;
			}

			.row .img {
				width: 100px;
				height: 80px;
				border-radius: 4px;
				overflow: hidden;
			}

			.row .img img {
				width: 100%;
				height: 100%;
			}

			.row .desc {
				position: absolute;
				top: 0;
				left: 100px;
				right: 0;
				bottom: 0;
				padding-left: 5px;
			}

			.row .desc .title {
				font-size: 14px;
				height: 40px;
				line-height: 20px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.row .desc .title .hot {
				color: #fff;
				background: #cd1b21;
				font-size: 12px;
				border-radius: 2px;
				margin-right: 5px;
				display: inline-block;
				line-height: 16px;
				padding: 0 2px;
				vertical-align: middle;
			}

			.tag {
				position: relative;
				overflow: hidden;
			}

			.tag>div {
				transform: scale(0.8);
				-webkit-transform-origin-x: 0;
				overflow: hidden;
				width: 128%;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.tag span {
				color: #cd1b21;
				border: 1px solid #ff6e73;
				font-size: 12px;
				border-radius: 2px;
				display: inline-block;
				line-height: 16px;
				padding: 0 2px;
				vertical-align: middle;
				margin-right: 4px;
				margin-bottom: 4px;
			}

			.row .desc .sub-title {
				font-size: 12px;
				color: #969799;
				line-height: 20px;
				height: 40px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.row .desc .sub-title * {
				vertical-align: middle;
			}

			.price {
				color: #cd1b21;
				font-size: 18px;
				line-height: 40px;
			}

			.van-stepper__minus,
			.van-stepper__plus {
				width: 24px;
				height: 24px;
			}

			.van-stepper__input {
				height: 24px;
				line-height: 24px;
			}

			.bottom .van-checkbox {
				display: flex;
			}

			.sq-m {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: rgba(255, 255, 255, 0.5);
			}

			.sq {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}

			.sq img {
				position: absolute;
				left: 0;
				top: 0;
				width: 30px !important;
				height: 30px !important;
			}

			.delete {
				color: #cd1b21;
				vertical-align: middle;
				padding-left: 10px;
				margin-top: -2px;
				font-weight: 700;
			}
		</style>

	</head>

	<body>
		<div id="app" v-cloak>
			<div class="init-full">
				<van-nav-bar class="head" title="购物车" left-arrow @click-left="onClickLeft"></van-nav-bar>
				<div class="body-with-bottom">
					<div class="content">
						<div class="search">
							<van-cell title="商品分类" :value="type.name" is-link arrow-direction="down"
								@click="showType = true;"></van-cell>
						</div>
						<div class="pd">
							<div>
								<van-swipe-cell v-for="(item,index) in cartList">
									<div class="ov">
										<div class="checkbox" @click="toggleChecked(item)">
											<van-checkbox icon-size="18" checked-color="#cd1b21"
												:disabled="item.Stock <= 0" v-model="item.checked">
											</van-checkbox>
										</div>
										<div class="p" @click="intoDetail(item,$event)">
											<div class="row">
												<div class="img">
													<img v-lazy="shoppingMallServerIP + item.ThumbnailUrl160" />
												</div>
												<div class="desc">
													<div class="title"><span
															class="hot">{{item.BrandName}}</span>{{item.ProductName}}
													</div>
													<div class="price">
														<span style="font-size: 12px;">￥</span>{{item.SalePrice}}
														<div @click.stop="" style="float: right;">
															<van-stepper :integer="true" :min="item.StepNum"
																:max="item.Stock" :step="item.StepNum"
																:disable-input="item.StepNum > 1?true:false"
																v-model="item.Quantity" @change="changeShopNum(item)">
															</van-stepper>
														</div>

													</div>
												</div>

											</div>

										</div>
									</div>
									<template slot="right">
										<van-button square type="danger" text="删除" style="height: 100%;"
											@click.stop="deleteShop(item,index)"></van-button>


									</template>
								</van-swipe-cell>
							</div>
						</div>
					</div>
					<van-loading v-if="showLoading" />
				</div>
				<div class="bottom">
					<van-submit-bar :price="getTotal()" @submit="onSubmit" button-text="结算">
						<div class="flex-box">
							<van-checkbox checked-color="#cd1b21" v-model="allChecked"
								@change="changeAll">全选</van-checkbox>
							<span class="delete" v-if="showButton()" @click="deleteShopAll">删除</span>
						</div>

					</van-submit-bar>
				</div>
			</div>

			<van-popup v-model="showType" position="bottom">
				<van-picker :columns="typeList" value-key="CategoryName" show-toolbar @cancel="showType = false;"
					@confirm="onConfirmType"></van-picker>
			</van-popup>
		</div>
	</body>

	<!-- 调用 uniapp webview 的 api ，记得需要写在 body 标签下面 -->
	<script src="../../../assets/script/uni.webview.1.5.4.js"></script>
	<script type="text/javascript">
		var vm;
		//$('.init-full').show();

		Vue.use(vant.Lazyload, {
			loading: '../image/no.png',
			error: '../image/no.png'
		});


		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				serverIP: 'http://' + FLD.serverIP,
				shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
				allCartList: [],
				cartList: [],
				typeList: [],
				allChecked: false,
				type: {
					name: '全部'
				},
				showType: false
			},
			created: function() {
				window.localStorage.getItem('searchKey')
				this.getCartList();
			},
			methods: {
				SendMessage() { // 向外部发送
					uni.postMessage({
						data: {
							action: 'GoBack'
						}
					});
				},
				showButton() {
					var that = this;
					var x = 0;
					for (var i in that.cartList) {
						if (that.cartList[i].checked) {
							x = 1;
						}
					}
					return x;
				},
				onConfirmType(value, index) {
					var that = this;
					that.showType = false;
					that.type.name = that.typeList[index].CategoryName;
					that.allChecked = false;
					that.changeAll(false);
					that.filterCartList();
				},
				filterCartList() {
					var that = this;
					if (that.type.name == '全部') {
						that.cartList = JSON.parse(JSON.stringify(that.allCartList));
					} else {
						that.cartList = that.allCartList.filter(function(item) {
							return item.CategoryName == that.type.name;
						})
					}

				},
				getCartList() {
					var that = this;
					that.showLoading = true;
					FLD.ajax('sp_getShipCarts', {}, function(res) {
						
						that.showLoading = false;
						that.cartList = res.ds;
						that.allCartList = JSON.parse(JSON.stringify(that.cartList));
						that.typeList = [{
							CategoryName: '全部'
						}].concat(res.ds1);
					})
				},
				toggleChecked(item) {
					var that = this;
					if (typeof item.checked === 'undefined') {
						this.$set(item, 'checked', true);
					} else {
						item.checked = !item.checked;
					}

				},
				changeShopNum(item) {
					var that = this;
					FLD.ajax('sp_updateShipCart', {
						productId: item.ProductId,
						quantity: item.Quantity
					}, function(res) {
						//修改成功
					})
				},
				deleteShop(item, index) {
					var that = this;
					that.$dialog.confirm({
						title: '提示',
						message: '是否删除该商品?'
					}).then(() => {
						FLD.ajax('sp_deleteShipMart', {
							productIds: item.ProductId
						}, function(res) {
							layer.open({
								content: '商品删除成功!',
								skin: 'msg',
								time: 2
							});
							that.cartList.splice(index, 1);
						})
					}).catch(() => {

					});

				},
				deleteShopAll() {
					var that = this;
					that.$dialog.confirm({
						title: '提示',
						message: '是否删除该商品?'
					}).then(() => {
						var ids = [];
						for (var i in that.cartList) {
							if (that.cartList[i].checked) {
								ids.push(that.cartList[i].ProductId)
							}
						}
						FLD.ajax('sp_deleteShipMart', {
							productIds: ids.join()
						}, function(res) {
							layer.open({
								content: '商品删除成功!',
								skin: 'msg',
								time: 2
							});
							that.getCartList();
						})
					}).catch(() => {

					});

				},
				changeAll(v) {
					var that = this;
					if (v) {
						for (var i in that.cartList) {
							if (that.cartList[i].Stock > 0) {
								that.$set(that.cartList[i], 'checked', true);
							} else {
								that.$set(that.cartList[i], 'checked', false);
							}

						}
					} else {
						for (var i in that.cartList) {
							that.$set(that.cartList[i], 'checked', false);
						}
					}
				},
				intoDetail(row, e) {
					var that = this;
					if ($(e.target).closest('.van-swipe-cell__wrapper').css('transform') ==
						'matrix(1, 0, 0, 1, 0, 0)') {
						window.localStorage.setItem('productData', JSON.stringify(row))
						window.localStorage.setItem('stepIndex', JSON.stringify(1))
						window.location.href = './product.html'
						// api.openWin({
						// 	name: 'product',
						// 	url: 'product.html',
						// 	reload: true,
						// 	slidBackEnabled: false,
						// 	pageParam: {
						// 		productData: row,
						// 		stepIndex: 1
						// 	}
						// })
					}

				},
				getTotal() {
					var that = this;
					var t = 0;
					for (var i in that.cartList) {
						if (that.cartList[i].checked) {
							t += that.cartList[i].Quantity * that.cartList[i].SalePrice;
						}

					}
					return parseInt(t * 100);
				},
				getTotalNum() {
					var that = this;
					var t = 0;
					for (var i in that.cartList) {
						if (that.cartList[i].checked) {
							t += that.cartList[i].Quantity
						}

					}
					return t;
				},
				onSubmit() {
					var that = this;
					var commodityList = [];
					for (var i in that.cartList) {
						if (that.cartList[i].checked) {
							commodityList.push({
								productId: that.cartList[i].ProductId,
								quantity: that.cartList[i].Quantity,
								price: that.cartList[i].SalePrice.toFixed(2),
								skuId: that.cartList[i].SkuId,
								image: that.cartList[i].ThumbnailUrl160,
								name: that.cartList[i].ProductName
							})
						}

					}
					if (commodityList.length) {

						window.location.href = './submitOrder.html';
						window.localStorage.setItem('commodityList', JSON.stringify(commodityList))
						window.localStorage.setItem('formType', '购物车')

						// api.openWin({
						// 	name: 'submitOrder',
						// 	url: 'submitOrder.html',
						// 	reload: true,
						// 	slidBackEnabled: false,
						// 	pageParam: {
						// 		commodityList: commodityList,
						// 		formType: '购物车'
						// 	}
						// })
					}

				},
				onClickLeft() {
					uni.postMessage({
						data: {
							action: 'GoBack'
						}
					});
				}
			}
		})
	</script>

</html>